<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { ref, reactive } from 'vue'
import { required } from '@/utils/formRules'
import { useForm } from '@/hooks/web/useForm'
import { sysFileFolderTreeApi } from '@/api/file'
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
const dict: any = wsCache.get('dict')
const data = ref<any>({})
const rules = reactive({
  pasture_org_id: [required],
  admin_dept_id: [required],
  data: [required]
})

const datafolderTree: any = ref([])

const getTree = async (val) => {
  const res = await sysFileFolderTreeApi({
    my_org_id: wsCache.get('my_org_id'),
    belong_type: val
  })
    .catch(() => {})
    .finally(() => {})
  if (res) {
    datafolderTree.value = [{ id: '0', name: '=== 顶级 ===' }, ...res.data]
  }
}
const schema = reactive<FormSchema[]>([
  {
    field: 'belong_type',
    label: '所属类型',
    component: 'Select',
    componentProps: {
      options: dict.belong_type,
      onChange: getTree
      // disabled: true
    }
  },
  {
    field: 'id',
    label: '转移到',
    component: 'TreeSelect',
    componentProps: {
      data: datafolderTree,
      'check-strictly': true,
      'default-expand-all': true,
      'node-key': 'id',
      props: {
        children: 'children',
        label: 'name'
      }
      // onChange: myUserListChange
    },
    formItemProps: {
      rules: [required]
    }
  }

  // {
  //   field: 'in_enclosure_id',
  //   label: '转移到',
  //   component: 'TreeSelect',
  //   hidden: false,
  //   componentProps: {
  //     data: newTreeData,
  //     'check-strictly': true,
  //     'default-expand-all': true,
  //     'node-key': 'id',
  //     props: {
  //       children: 'children',
  //       label: 'name'
  //     },
  //     onChange: outEnclosure
  //   },
  //   formItemProps: {
  //     rules: [required]
  //   }
  // }
])

const { register, methods: methodsForm } = useForm({
  schema
})

const getFormData = async () => {
  let formData = await methodsForm.getFormData()
  return {
    ...formData
  }
}

defineExpose({
  getFormData
})

const init = async () => {
  methodsForm.setValues(data.value)
}
init()
</script>

<template>
  <ContentWrap title="主数据">
    <Form :rules="rules" @register="register" :data="data" />
  </ContentWrap>
</template>
